<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
      Vue2 中生命周期的钩子函数
        1. beforeCreate
        2. created
        3. beforeMount
        4. mounted
        5. beforeUpdate
        6. updated
        7. beforeDestroy
        8. destroyed

        9. activated
        10. deactivated
        11. nextTick

      Vue3 中生命周期的钩子函数
        1. 新增一个 setup
        2. beforeDestroy => beforeUnmount
        3. destroyed     => unmounted
        4. 还新增了一些组合式的生命周期钩子函数 (beforeCreate 与 created 没有对应的组合式写法。他们两个可以使用 setup 代替)
          onMounted()
          onUpdated()
          onUnmounted()
          onBeforeMount()
          onBeforeUpdate()
          onBeforeUnmount()
          onActivated()
          onDeactivated()



          onErrorCaptured()
          onRenderTracked()
          onRenderTriggered()
          onServerPrefetch()


     -->
    <div id="app">
      <h1>App</h1>
      <button @click="show = !show">控制 lv-echarts 的使用</button>

      <template v-if="show">
        <lv-echarts :option="option1"></lv-echarts>

        <lv-echarts :option="option2"></lv-echarts>
      </template>
    </div>

    <script src="./lib/vue.global.js"></script>
    <script src="./lib/echarts.min.js"></script>
    <script>
      const { onMounted, onBeforeUnmount, onBeforeUpdate, ref, watch } = Vue;

      // createApp 返回的是 应用实例，可以对应用实例做 全局组件注册、全局指令注册、全局配置。。。
      // .mount('#app') 之后得到是一个 组件实例
      const app = Vue.createApp({
        // setup 是 vue3 组合式API的入口
        setup() {
          const show = ref(true);
          const option1 = ref(null);
          const option2 = ref(null);

          onMounted(() => {
            // 调接口，获取数据
            fetch("/json/option1.json")
              .then((resopnse) => resopnse.json())
              .then((data) => {
                console.log(data);

                option1.value = data;
              });

            fetch("/json/option2.json")
              .then((resopnse) => resopnse.json())
              .then((data) => {
                console.log(data);

                option2.value = data;
              });
          });

          return {
            show,
            option1,
            option2,
          };
        },
      });

      // 注册一个全局组件
      app.component("lv-echarts", {
        // Vue3 中的，模板可以有多个根元素
        template: `
          <div ref="box" class="main" style="width: 600px;height:400px;"></div>

          <button @click="count++">{{ count }}</button>
        `,

        props: ["option"],

        // 初始化 echarts 要放到哪里去做？
        setup(props) {
          // 组合式API中，如何使用 ref?
          //    定义一个与 ref 标记同名的一个 ref 对象。即可。
          const box = ref(null);
          const count = ref(0);
          let myEcharts;
          let timer;

          onMounted(() => {
            // console.log("box", box.value);

            myEcharts = echarts.init(box.value);
            // console.log(myEcharts);
            props.option && myEcharts.setOption(props.option);

            timer = setInterval(() => {
              console.log("1");
            }, 1000);
          });

          onBeforeUnmount(() => {
            // 准备卸载之前
            console.log("onBeforeUnmount");
            clearInterval(timer);
          });

          // 使用 watch 具体监听某个数据的变化，去做事情
          watch(
            () => props.option,
            (newVal, oldVal) => {
              console.log("props.option 变化了", newVal, oldVal);
              myEcharts.setOption(newVal);
            }
          );

          // beforeUpdate 与 updated 会多次触发，没必要在这里做这个逻辑
          // onBeforeUpdate(() => {
          //   console.log("lv-echarts, onBeforeUpdate");
          //   myEcharts.setOption(props.option);
          // });

          return {
            box,
            count,
          };
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
